<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        查询
      </div>
      <el-form ref="form" :model="formData" label-width="80px" :inline="true" size="mini">
        <el-form-item :label="text ? '' : '商品名称'">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item :label="text ? '' :'商品货号'">
          <el-input v-model="formData.productSn" />
        </el-form-item>
        <el-form-item :label="text ? '' :'品牌'">
          <!--  -->
          <el-select v-model="formData.brandId" placeholder="请选择">
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="text ? '' :'上架状态'">
          <!--  -->
          <el-select v-model="formData.publishStatus" placeholder="请选择">
            <el-option
              label="下架"
              value="0"
            />
            <el-option
              label="上架"
              value="1"
            />
          </el-select>
          <el-form-item :label="text ? '' :'审核状态'">
            <!--  -->
            <el-select v-model="formData.verifyStatus" placeholder="请选择">
              <el-option
                label="未审核"
                value="0"
              />
              <el-option
                label="审核通过"
                value="1"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form-item></el-form>

    </el-card>

    <el-card class="margin30" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">

        <div v-if="text">
          商品列表
        </div>
        <div v-else>
          <el-button type="primary" size="mini" @click=""><router-link to="/goodsManage/list/add">新增</router-link></el-button>
          <el-button type="primary" size="mini" @click="ToExcel">导出excel</el-button>
        </div>
      </div>
      <!-- card body -->
      <el-table :data="list" border>
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          v-if="text"
          label="选择"
        >
          <template v-slot="socpe">
            <el-radio v-model="radio" :label="socpe.row.id" @change="showMask(socpe.row)"><span /></el-radio>
          </template>
        </el-table-column>
        <el-table-column
          label="商品图片"
        >
          <template v-slot="socpe">
            <img style="width: 100px;;height:100px;" :src="socpe.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="商品名称"
        >
          <template v-slot="scope">
            <div>
              <p>{{ scope.row.name }}</p>
              <p>品牌:{{ scope.row.brandName }}</p>
              <p>{{ scope.row.description }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template v-slot="scope">
            <router-link :to="`/goodsManage/list/edit/${scope.row.id}`">编辑</router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="start"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      title="编辑限时活动"
      :visible.sync="isShow"
      width="80%"
      append-to-body
      @close="close"
    >
      <el-form ref="form" :model="form" label-width="130px" :inline="false" size="mini">
        <el-form-item label="商品原价">
          <!-- <el-input v-model="form.price" /> -->
          <p>{{ form.price }}</p>
        </el-form-item>
        <el-form-item label="商品名称">
          <!-- <el-input v-model="form.name" /> -->
          <p>{{ form.name }}</p>
        </el-form-item>
        <el-form-item label="促销价格">
          <el-input v-model="form.promotionPrice" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="form.promotionStartTime"
            value-format="yyyy-M-dd HH:hh:ss"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="form.promotionEndTime"
            value-format="yyyy-M-dd HH:hh:ss"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="活动限购数量">
          <el-input v-model="form.promotionPerLimit" />
        </el-form-item>
        <el-form-item label="商品图片">
          <img :src="form.pic" style="width:100px;height:100px" alt="">
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import {
  productsByPage,
  findAllBrand,
  addRecommend
} from '@/api/goodsManage/list'
import { save } from '@/api/orderManage/address'
import mix from '@/mixins/index'
export default {
  mixins: [mix],
  props: ['text'], // text 用于判断当前组件是否是营销管理使用还是商品管理使用
  data() {
    return {
      brandList: [],
      radio: 1,
      isShow: false,
      formData: {
        'brandId': '',
        'id': '',
        'name': '',
        'productCategoryId': '',
        'productSn': '',
        'publishStatus': '',
        'verifyStatus': ''
      },
      list: [],
      form: {
        'brandName': '',
        'createTime': '',
        'modifyTime': '',
        'name': '',
        'pic': '',
        'price': '',
        'productCategoryName': '',
        'productId': '',
        'productSn': '',
        'promotionEndTime': '',
        'promotionPerLimit': '',
        'promotionPrice': '',
        'promotionStartTime': '',
        'publishStatus': '',
        'recommendId': '',
        'sort': '',
        'type': ''
      }
    }
  },
  computed: {

  },
  created() {
    this.init()
    findAllBrand()
      .then(res => {
        console.log(res)
        this.brandList = res.data.items
      })
  },
  mounted() {

  },
  methods: {
    save() {
      addRecommend(this.form)
        .then(res => {
          this.isShow = !this.isShow
          this.$emit('closedialog')
        })
    },
    showMask(val) {
      this.isShow = !this.isShow
      // this.form = val
      this.form.price = val.price
      this.form.name = val.name
      this.form.pic = val.pic
      this.form.productId = val.id
    },
    close() {

    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    ToExcel() {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['商品名称', '商品价格'] // 表头文字
        const filterVal = ['name', 'price'] // 表头对应的数据
        const list = this.list
        const data = this.formatJson(filterVal, list)
        console.log(data)
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data: data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    init() {
      productsByPage(this.start, this.limit, this.formData)
        .then(res => {
          this.list = res.data.rows
          this.total = res.data.total
        })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
